<template>
  <div class="app-container">
<!--    <IntroduceTip :value="10"></IntroduceTip>-->
    <div class="custom_card_0">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="订单编号" prop="modelName">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input
            v-model="queryParams.carNo"
            placeholder="请输入车牌号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="所属门店" prop="storeId">
          <el-select
            v-model="queryParams.storeId"
            placeholder="请选择所属门店"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="(item, i) in storeList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间" prop="takeStartTime">
          <el-date-picker size="small" v-model="takeTime" type="daterange" range-separator="至"
                          :picker-options="{disabledDate: data=> new Date(data).getTime() >( new Date().getTime())}"
                          value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-bottom: 10px">
      <el-tag style="margin-left: 10px;font-size: 15px;color: #3C60E9">总应收：{{orderFeeTotal.costTotalAmount||0}}元</el-tag>
      <el-tag style="margin-left: 10px;font-size: 15px;color: #FF8304">总已收：{{orderFeeTotal.paidTotalAmount||0}}元</el-tag>
      <el-tag style="margin-left: 10px;font-size: 15px;color: #0080FF">总应支出：{{orderFeeTotal.unReturnTotalAmount||0}}元</el-tag>
      <el-tag style="margin-left: 10px;font-size: 15px;color: #FF0E34">总已支出：{{orderFeeTotal.returnTotalAmount||0}}元</el-tag>
      <el-tag style="margin-left: 10px;font-size: 15px;color: #08B6B2">总收支合计：{{orderFeeTotal.totalAmount||0}}元</el-tag>
    </div>

    <div class="custom_card">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            class="sec-plain-btn"
            size="medium"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5" v-if="false">
          <el-tooltip placement="right-start">
            <div slot="content" style="font-size: 14px">
              1、财务应收：财务模块-应收账单数据<br/>&nbsp;&nbsp;&nbsp;&nbsp;，按账单时间统计。（月租订单-运营账单<br/>&nbsp;&nbsp;&nbsp;&nbsp;的应收数据目前不统计入内）<br/>
              2、财务已收：财务模块-已收账单数据<br/>&nbsp;&nbsp;&nbsp;&nbsp;，按账单时间统计<br/>
              3、财务待支出：财务模块-应付账单及<br/>&nbsp;&nbsp;&nbsp;&nbsp;应退账单数据，按账单时间统计<br/>
              4、财务已支出：财务模块-已付账单及<br/>&nbsp;&nbsp;&nbsp;&nbsp;已退账单数据，按账单时间统计<br/>
              5、账单收支合计：财务应收+财务已收-财务<br/>&nbsp;&nbsp;&nbsp;&nbsp;待支出-财务已支出<br/>
              6、租金：车辆租金及续租金额<br/>
              7、车损费：还车验车产生费用，含单<br/>&nbsp;&nbsp;&nbsp;&nbsp;独收费金额及押金抵扣金额<br/>
              8、违章费：客户违章处理产生费用，<br/>&nbsp;&nbsp;&nbsp;&nbsp;含单独收费金额及押金抵扣金额<br/>
              9、处置入账：车辆处置入账金额<br/>
              10、借出待收：借出车辆待收金额<br/>
              11、借出已收：借出车辆已收金额<br/>
              12、维修：车辆维修，企业付款金额<br/>
              13、保养：车辆保养，企业付款金额<br/>
              14、保险：车辆保险支出金额<br/>
              15、年检：车辆年检支出金额<br/>
              16、违章：车辆违章，公司支出金额<br/>
              17、油费：车辆油费消耗金额<br/>
              18、分期车款：车辆购入消费金额<br/>
            </div>
            <el-button type="text">字段说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="1.5" v-if="false">
          <el-tooltip placement="right-start">
            <div slot="content" style="font-size: 14px">
              结合财务模块收支数据，统计车辆所有收支账单数据。
            </div>
            <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    <el-table v-loading="loading" :data="orderFeeStatisticsList" border>
      <el-table-column label="订单编号" min-width="100" align="center" prop="orderNo" />
      <el-table-column label="租赁时间" min-width="100" align="center" prop="rentTime" />
      <el-table-column label="客户名称" min-width="100" align="center" prop="memberName" />
      <el-table-column label="客户手机号" min-width="100" align="center" prop="memberPhone" />
<!--      <el-table-column label="车牌号" min-width="100" align="center" prop="carNo" />-->
<!--      <el-table-column label="车型" min-width="200" show-overflow-tooltip align="center" prop="modelName" />-->

      <el-table-column label="所属门店" min-width="200" show-overflow-tooltip align="center" prop="storeName" />
      <el-table-column label="车牌号" min-width="100" align="center" prop="carNo" />
<!--      <el-table-column label="订单状态" min-width="100" align="center" prop="orderStatus" />-->
      <!--      <el-table-column label="出租天数(天)" align="center" prop="rentalDays" />-->
<!--      <el-table-column label="统计天数(天)" align="center" prop="statisticsDays" />-->
<!--      <el-table-column label="出租率(%)" align="center" prop="rentalRate" >-->
<!--        <template slot-scope="{row}">-->
<!--          {{(row.rentalRate*100.0).toFixed(2)}}-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column label="订单应收(元)" align="center" v-if="openColumn1">
        <template slot="header" slot-scope="scope">
          订单应收(元) <el-button type="text" size="mini" @click="openColumn1=!openColumn1">收起</el-button>
        </template>
        <el-table-column label="车辆押金" align="center" prop="costDeposit"/>
        <el-table-column label="违章押金" align="center" prop="costIllegal"/>
        <el-table-column label="租金" align="center" prop="costRent"/>
        <el-table-column label="违章费" align="center" prop="costViolation"/>
        <el-table-column label="车损费" align="center" prop="costVehicle"/>
        <el-table-column label="合计" align="center" prop="costTotal"/>
      </el-table-column>

      <el-table-column label="订单应收(元)" align="center"  prop="payableTotal" v-if="!openColumn1">
        <template slot="header" slot-scope="scope">
          订单应收(元) <el-button type="text" size="mini" @click="openColumn1=!openColumn1">展开</el-button>
        </template>
        <el-table-column label="合计" min-width="160" align="center" prop="costTotal"/>
      </el-table-column>


      <el-table-column label="订单已收(元)" align="center"  prop="payTotal" v-if="openColumn2">
        <template slot="header" slot-scope="scope">
          订单已收(元) <el-button type="text" size="mini" @click="openColumn2=!openColumn2">收起</el-button>
        </template>
        <el-table-column label="车辆押金" align="center" prop="paidDeposit"/>
        <el-table-column label="违章押金" align="center" prop="paidIllegal"/>
        <el-table-column label="租金" align="center" prop="paidRent" />
        <el-table-column label="违章费" align="center" prop="paidViolation"/>
        <el-table-column label="车损费" align="center" prop="paidVehicle"/>
        <el-table-column label="合计" align="center" prop="paidTotal"/>
      </el-table-column>

      <el-table-column label="订单已收(元)" align="center"  prop="payableTotal" v-if="!openColumn2">
        <template slot="header" slot-scope="scope">
          订单已收(元) <el-button type="text" size="mini" @click="openColumn2=!openColumn2">展开</el-button>
        </template>
        <el-table-column label="合计" min-width="160" align="center" prop="paidTotal"/>
      </el-table-column>

      <el-table-column label="订单应支出(元)" align="center" v-if="openColumn3">
        <template slot="header" slot-scope="scope">
          订单应支出(元) <el-button type="text" size="mini" @click="openColumn3=!openColumn3">收起</el-button>
        </template>
        <el-table-column label="车辆押金" align="center" prop="unReturnDeposit"/>
        <el-table-column label="违章押金" align="center" prop="unReturnIllegal"/>
        <el-table-column label="租金" align="center" prop="unReturnRent" />
        <el-table-column label="加油费" align="center" prop="unRefuelingFee" />
        <el-table-column label="过路费" align="center" prop="unPontageFee" />
        <el-table-column label="停车费" align="center" prop="unParkingFee" />
        <el-table-column label="收发车补贴" align="center" prop="unSubsidyFee" />
        <el-table-column label="手续费" align="center" prop="unProcedureFee" />
        <el-table-column label="托运费" align="center" prop="unConsignFee" />
        <el-table-column label="车损费" align="center" prop="unCarDamageFee" />
        <el-table-column label="提成费用" align="center" prop="unRoyaltyFee" />
        <el-table-column label="同行调车费" align="center" prop="unShuntingFee" />
        <el-table-column label="其他费用" align="center" prop="unOtherFee" />
      </el-table-column>

      <el-table-column label="订单应支出(元)" align="center"  prop="payableTotal" v-if="!openColumn3">
        <template slot="header" slot-scope="scope">
          订单应支出(元) <el-button type="text" size="mini" @click="openColumn3=!openColumn3">展开</el-button>
        </template>
        <el-table-column label="合计" min-width="160" align="center" prop="unReturnTotal"/>
      </el-table-column>

      <el-table-column label="订单已支出(元)" align="center" v-if="openColumn4">
        <template slot="header" slot-scope="scope">
          订单已支出(元) <el-button type="text" size="mini" @click="openColumn4=!openColumn4">收起</el-button>
        </template>
        <el-table-column label="车辆押金" align="center" prop="returnDeposit"/>
        <el-table-column label="违章押金" align="center" prop="returnIllegal"/>
      <el-table-column label="租金" align="center" prop="returnRent" />
        <el-table-column label="加油费" align="center" prop="returnRefuelingFee" />
        <el-table-column label="过路费" align="center" prop="returnPontageFee" />
        <el-table-column label="停车费" align="center" prop="returnParkingFee" />
        <el-table-column label="收发车补贴" align="center" prop="returnSubsidyFee" />
        <el-table-column label="手续费" align="center" prop="returnProcedureFee" />
        <el-table-column label="托运费" align="center" prop="returnConsignFee" />
        <el-table-column label="车损费" align="center" prop="returnCarDamageFee" />
        <el-table-column label="提成费用" align="center" prop="returnRoyaltyFee" />
        <el-table-column label="同行调车费" align="center" prop="returnShuntingFee" />
        <el-table-column label="其他费用" align="center" prop="returnOtherFee" />
      <el-table-column label="合计" align="center" prop="returnTotal" />
      </el-table-column>

      <el-table-column label="订单已支出(元)" align="center"  prop="disburseTotal" v-if="!openColumn4">
        <template slot="header" slot-scope="scope">
          订单已支出(元) <el-button type="text" size="mini" @click="openColumn4=!openColumn4">展开</el-button>
        </template>
        <el-table-column label="合计" min-width="160" align="center" prop="returnTotal"/>
      </el-table-column>

      <el-table-column label="账单收支合计" min-width="100" align="center" prop="total" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>

  </div>
</template>

<script>
import { orderFee,exportOrderFee,orderFeeTotal } from '@/api/bills/financial';
import {getStoreList} from "@/api/car/model";

export default {
  name: "VehicleRevenueStatistics",
  data() {
    return {
      showTip:true,
      openColumn1:false,
      openColumn2:false,
      openColumn3:false,
      openColumn4:false,
      storeList:[],
      // 遮罩层
      loading: true,
      takeTime: [new Date(new Date().getTime()-31*24*60*60*1000),new Date()],
      // 导出遮罩层
      exportLoading: false,
      showSearch: true,

      // 总条数
      total: 0,
      // VIEW表格数据
      orderFeeStatisticsList: [],
      orderFeeTotal: {
        costTotalAmount:0,
        paidTotalAmount:0,
        unReturnTotalAmount:0,
        returnTotalAmount:0,
        totalAmount:0
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo:null,
        storeId: null,
        billStartTime: null,
        billEndTime: null,
        carNo: null,
        modelName: null
      }
    };
  },
  created() {
    this.getList();
    getStoreList().then((response) => {
      this.storeList = response.data
    })
  },
  methods: {
    closeTip(){
      this.showTip = false;
    },
    /** 查询VIEW列表 */
    getList() {
      if (this.takeTime) {
        this.queryParams.createStartTime = this.parseTime(this.takeTime[0], '{y}-{m}-{d} 00:00:00')
        this.queryParams.createEndTime = this.parseTime(this.takeTime[1], '{y}-{m}-{d} 23:59:59')
      } else {
        this.takeTime=[new Date(new Date().getTime()-31*24*60*60*1000),new Date()]
        this.queryParams.createStartTime = this.parseTime(this.takeTime[0], '{y}-{m}-{d} 00:00:00')
        this.queryParams.createEndTime = this.parseTime(this.takeTime[1], '{y}-{m}-{d} 23:59:59')
      }
      this.loading = true;
      orderFeeTotal(this.queryParams).then(response => {
        this.orderFeeTotal = response.data||0;
      });
      orderFee(this.queryParams).then(response => {
        this.orderFeeStatisticsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.takeTime=[new Date(new Date().getTime()-31*24*60*60*1000),new Date()]
      this.queryParams.createStartTime = this.takeTime[0]
      this.queryParams.createEndTime = this.takeTime[1]
      this.queryParams.orderNo =null
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有数据项？').then(() => {
        this.exportLoading = true;
        return exportOrderFee(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
